import React from 'react'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import { actionCreator } from './store'
import { 
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  SearchWrapper,
  NavSearch,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition,
  Button
 } from './style.js'

class Header extends React.Component{
  constructor(props){
    super(props)
    this.getListArea = this.getListArea.bind(this)
  }
  render(){
    const {focused, list, value, handelInputFocus, handelInputBlur, handelInputChange} = this.props
    return (
      <HeaderWrapper>
        <Logo />
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载</NavItem>
          <NavItem className="right">登录</NavItem>
          <NavItem className="right">
            <i className="iconfont zoom">&#xe636;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
              <NavSearch
                className={focused ? 'focused' : ''}
                onFocus={() => {handelInputFocus(list)}}
                onBlur={handelInputBlur}
                onChange={handelInputChange}
                value={value}
              ></NavSearch>
            </CSSTransition>
            <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'} >&#xe614;</i>
            { this.getListArea() }
          </SearchWrapper>
          <Addition>
            <Button className="writting">
              <i className="iconfont zoom">&#xe615;</i>
              写文章
            </Button>
            <Button className="reg">注册</Button>
          </Addition>
        </Nav>
      </HeaderWrapper>
    )
  }
  getListArea() {
    const {focused, list, page, mouseIn, totalPage, handelMouseEnter, handelMouseLeave, handelChangePage, itemClick} = this.props
    const newList = list.toJS()
    const pageList = []
    if(newList.length){
      for(let i = (page - 1) * 10 ; i < page *10 ; i++){
        pageList.push(
          <SearchInfoItem key={newList[i]} onClick={() => {itemClick(newList[i])}}>{newList[i]}</SearchInfoItem>
        )
      }
    }
    if(focused || mouseIn){
      return (
        <SearchInfo 
        onMouseEnter={handelMouseEnter}
        onMouseLeave={handelMouseLeave}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch 
            onClick={() => {handelChangePage(page, totalPage, this.spinIcon)}}
            >
              <i className="iconfont spin" ref={(icon) => {this.spinIcon = icon}}>&#xe7e9;</i>
              换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList}
          </SearchInfoList>
        </SearchInfo>
      )
    }else{
      return null
    }
   }
}


const mapStateToProps = (state) => {
  return {
    value: state.getIn(['header', 'value']),
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(["header", "list"]),
    page: state.getIn(["header", "page"]),
    totalPage: state.getIn(["header", "totalPage"]),
    mouseIn: state.getIn(["header", "mouseIn"])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    handelInputFocus(list) {
      (list.size === 0) && dispatch(actionCreator.getList())
      dispatch(actionCreator.searchFocus())
    },
    handelInputBlur() {
      dispatch(actionCreator.searchBlur())
    },
    handelMouseEnter(){
      dispatch(actionCreator.changeMouseEnter())
    },
    handelMouseLeave(){
      dispatch(actionCreator.changeMouseLeave())
    },
    handelChangePage(page, totalPage, spin){
      let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
      if(originAngle){
        originAngle = parseInt(originAngle)
      }else{
        originAngle = 0
      }
      spin.style.transform = 'rotate('+(originAngle + 360)+'deg)'
      if(page < totalPage){
        dispatch(actionCreator.changePage(page + 1))
      }else{
        dispatch(actionCreator.changePage(1))
      }
    },
    itemClick(item){
      dispatch(actionCreator.getItem(item))
    },
    handelInputChange(e){
      dispatch(actionCreator.changeValue(e.target.value))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)